<template>
  <s-layout title="抢红包结果">
    <view class="lottery-result-container">
      <view class="result">
        <view class="result-item"  
          v-for="result in state.resultList"
          :key="result.id"
          @click="viewDetail(result)"
        >
          <view class="result-item-header">
            <view class="title">抢红包结果</view>
            <view class="prize-list">
              <!-- 单个奖品 -->
              <view 
                class="prize-name"
                @click="toPrizePage(result)"
              >{{ result.name }}</view>
              <!-- 多个奖品 -->
              <!-- <block 
                v-for="(coupon, index) in result.couponType"
                :key="coupon"
              >
                <view class="prize-name">{{ coupon }}</view>
                <view 
                  v-if="index < result.couponType.length - 1 && result.couponType.length > 1"
                  class="plus"
                >
                  +
                </view>
              </block> -->
            </view>
          </view>
          <view class="result-item-body">
            <view class="item">
              <view>抢红包时间</view>
              <view>{{ result.create_time }}</view>
            </view>
            <view class="item" style="margin-bottom: 12rpx;">
              <view>抢红包方式</view>
              <view>{{ LOTTERY_TYPE[result.type] || '--' }}</view>
            </view>
            <view v-if="result.point === 'goods'" class="view-detail">
              <view class="view-detail-text">查看详情</view>
              <view class="arrow" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
    <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无抢红包结果"></s-empty>
  </s-layout>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  // 类型:week=用户每周抽奖,register=注册抽奖,buy=支付抽奖,day=用户每日抽奖,week_supplier=商家每周抽奖
  const LOTTERY_TYPE = {
    week: '用户每周抽奖',
    register: '注册抽奖',
    buy: '支付抽奖',
    day: '用户每日抽奖',
    week_supplier: '商家每周抽奖'
  }

  const state = reactive({
    resultList: [
      // #NOTE 以下方式是抢红包结果为多种情况
      // {
      //   id: 1,
      //   time: '2024.04.07 20:00:00',
      //   style: '消费抢红包',
      //   couponType: ['5元现金', '满60减3优惠券']
      // },
    ],
    pagination: {
      current_page: 1,
      last_page: 1,
      total: 0
    },
    loadStatus: '', // 加载更多状态 ['more' | 'noMore']
  });

  const viewDetail = res => {
    console.log(res, 'res==')
    if(res.point === 'goods'){
		  sheep.$router.go(`/pages/tuangou/write_of?id=${res.id}`);
	  }
  }

  const getRecordList = () => {
    sheep.$api.prize_week.lotterysupplierDayuserLotteryLog({ page: state.pagination.current_page }).then((res) => {
      const { data, error } = res
      console.log(data, '数据')

      if (error == 0) {
        const { total, current_page, last_page } = data
        state.resultList = [...state.resultList, ...data.data]

        Object.assign(state.pagination, { total, current_page, last_page })

        if (state.pagination.current_page < state.pagination.last_page) {
          state.loadStatus = 'more';
        } else {
          state.loadStatus = 'noMore';
        }

        console.log(state.loadStatus, 'state.loadStatus')
      }
    });
  }

  const toPrizePage = res => {
    console.log(res.point, 'res==')
    // uni.showToast({
    //   icon: 'none',
    //   title: '请联系客服',
    //   duration: 1000,
    // });
    // 优惠券
    // sheep.$router.go('/pages/coupon/list');
    // 余额
    // sheep.$router.go('/pages/user/wallet/money');
  }

  const loadmore = () => {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page ++
      getRecordList();
    }
  }

  onLoad(() => {
    getRecordList()
  });

  onReachBottom(() => {
    console.log('触底了。')
     loadmore()
  });
</script>

<style lang="less" scoped>
@import './style/business-lottery-result-week.scss';
</style>
